<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 1100px;
            height: 800px;
            margin: 0 auto;
            background-color: orange;
        }
        
        .item{
            /* 这里整体给宽度+1，因为border地方重叠了，还设置了box-sizing，最终宽度必然少1像素 */
            width: 221px;
            height: 168px;
            float: left;
            background-color: pink;

            border: 1px solid #000;
            /* 设置负值后，右边的盒子就会往左移动，有种层叠效果，这样就消除了border叠加 */
            /* 必须设置成margin-left:负值，这样是能出现层叠效果的，具体在11文件中也有演示 */
            margin-left: -1px;
            /* 但是现在整体都往左边移动了1px */
            box-sizing: border-box;
        }

        /* 之所以要这样设置，是因为上面我们设置边框后，其实总体还是会多1px，
           五个盒子都设置边框，那么宽度上整体会多出6px，然后我们每个盒子又多设置1px
           此时仍然欠1px，因此需要给第一个盒子重新设置为220px，这样就扯平了 */
        .first{
            width: 220px;
        }

        .box{
            /* 此时效果是里面小盒子整体往左动了1px，因为第一个盒子少了1px嘛
               这时候margin-left:1px就好了 也可以改成item里面变成margin-right:-1px; */
               margin-left: 1px;
        }
    </style>
</head>
<body>
    <!-- 方案二，直接给每个小盒子设置边框，但要注意边框层叠问题，以及多出的1px，
         多出的1px解决方法就是给某个盒子减少1px宽度，这个没办法只能这样做 -->
    <!-- 流程如下：
         一、给每个盒子加边框，然后边框一定会重叠，这里使用margin-left负值移动像素去除重叠
         二、因为使用了margin去除边框重叠，所以之前设置的220宽度，实际上展现出来只有219，
         所以要去手动给每个Item的宽度+1px，改成221宽度
         三、然后此时我们会发现，其实最后一个盒子的右边框并没有被覆盖1px，我们又设置的是221宽度
         这里就会多出1px的像素，所以我们需要给第一个或者某个盒子还是得设置成220像素
         四、最后我们会发现由于某个盒子少了1px像素，右侧又会少1px，这时候我们直接box大盒子整体
         margin-left:1px就好了，而且本来第一个盒子就移出来了1px，刚好调回去
    -->
    <div class="content">
        <div class="box">
            <!-- .item{$}*5 -->
            <div class="item first">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
        
    </div>
</body>
</html>